<template>
  <div class="personal">
    <div class="tabControl" @click="showHeader = !showHeader" :class="{ hide: !showHeader }">
      <icon-svg name="iconArrow"></icon-svg>
    </div>
    <el-tabs tab-position="left" v-model="tabName" @tab-click="handleClick" :class="{ 'hide-header': !showHeader }">
      <!-- <el-tab-pane label="账号管理" name="account">账号管理</el-tab-pane> -->
      <el-tab-pane label="基本资料" name="basisInfo">
        <basis-info :info="info" ref="basisInfo" @refresh="getPersonalInfo" />
      </el-tab-pane>
      <el-tab-pane label="安全设置" name="securitySetting">
        <security-setting :info="info" />
      </el-tab-pane>
      <el-tab-pane label="个性化设置" name="settings">
        <settings ref="settings" :info="info" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import basisInfo from './personal-basis-item'
import securitySetting from './personal-security-item'
import settings from './personal-setting-item'
export default {
  components: {
    basisInfo,
    securitySetting,
    settings
  },
  data() {
    return {
      tabName: '',
      info: {},
      showHeader: true
    }
  },
  watch: {
    $route() {
      this.tabName = this.$route.query.tabName
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tabName = this.$route.query.tabName
      this.getPersonalInfo()
    })
  },
  methods: {
    getPersonalInfo() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUser/detailInfo'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.info = data.data
          this.$store.commit('user/updateDetailInfo', data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    handleClick(tab) {
      this.$router.push({ name: 'personal', query: { tabName: tab.name } })
    }
  }
}
</script>

<style lang="scss">
.personal {
  position: absolute;
  top: 60px;
  right: 15px;
  bottom: 15px;
  left: 0;
  .el-tabs {
    height: 100%;
    .el-tabs__header {
      width: 150px;
      transition: all 0.3s linear;
    }
    &.hide-header .el-tabs__header {
      width: 0;
    }
  }
  .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
    height: 50px;
    line-height: 50px;
    &.is-active {
      font-size: 16px;
    }
  }
  .tabControl {
    width: 15px;
    height: 20px;
    background-color: #f0ecec;
    border-left: 1px solid #e6e6e6;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 50%;
    left: 135px;
    margin-top: -7.5px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s linear;
    &:before,
    &:after {
      content: '';
      position: absolute;
      right: -0;
    }
    &:before {
      border-width: 15px 15px 0 0;
      border-style: solid;
      border-color: transparent#f0ecec transparent transparent;
      margin-top: -15px;
    }
    &:after {
      border-width: 15px 0 0 15px;
      border-style: solid;
      border-color: #f0ecec transparent transparent transparent;
      margin-top: 20px;
    }
    &.hide {
      left: 0;
      transform: rotate(180deg);
    }
    svg {
      width: 100%;
      height: 100%;
      color: $theme-color;
    }
  }
  .el-tabs__active-bar {
    background-color: #f0ecec;
  }
  .el-tabs__content {
    height: 100%;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      overflow: auto;
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(144, 147, 153, 0.5);
    }
  }
}
</style>
